<template>
  <div class="cards" @scroll.passive="getScroll($event)">
    <div class="items" v-for="(card,index) in cardList" :key="index" @click="showPicturePreview(index)">
      <div class="left">
        <div v-for="(item,i) in columnDefs" :key="i"><span class="dot" :style="{'background-color': i === 0 ? 'yellow' : 'green'}"></span>{{card[item.prop]}}</div>
      </div>
      <div class="right">
        <div v-if="card.nucleicUrl">
          <el-image
            fit='cover'
            style="width: 50px; height: 70px"
            :src="`/gateway/api/basic/minio/getFileSource?fileName=${card.nucleicUrl}`"
            >
          </el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columnDefs: {
      type: Array,
      require: true
    },
    cardList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    getScroll (e) {
      let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight
      if (scrollBottom < 50) {
        this.$emit('getNextPage')
      }
    },
    showPicturePreview (index) {
      this.$emit('showPicturePreview', index)
    }
  }
}
</script>

<style lang='scss' scoped>
.cards {
  display: flex;
  margin-left: -20px;
  flex-wrap: wrap;
  box-sizing: border-box;
  height: 60vh;
  overflow-y: scroll;
  .items {
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    width: calc(25% - 20px);
    margin-left: 20px;
    margin-bottom: 20px;
    > div {
      line-height: 24px;
    }
    .left {
      flex: 1;
    }
    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }
}
</style>
